import React, { useEffect } from 'react'
import { NavBar, Form, Button, Input,Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import './index.scss'
import { loginAPI } from '../../apis/profile'
import { getToken, setToken } from '../../utils/toke'
import { useDispatch } from 'react-redux'
import { fetchLogin } from '../../store/user'

export default function Login() {
    const navigate = useNavigate()
    const dispatch = useDispatch()
    const login = async(val) => {
        // const res = await loginAPI(val)
        // setToken(res.body.token)
        await dispatch(fetchLogin(val))
        navigate(-1)
        Toast.show({
            icon: 'success',
            content: '登陆成功',
          })
    }
    return (
        <div className='login'>
            <NavBar onBack={() => navigate(-1)}>账号登陆</NavBar>
            <div className='form'>
                <Form
                    layout='horizontal'
                    onFinish={(val) => login(val)}
                    footer={
                        <Button block type='submit' color='success' size='large'>
                            登陆
                        </Button>
                    }
                >
                    <Form.Item
                        name='username'
                        label='账号'
                        rules={[{ required: true, message: '账号不能为空' }]}
                    >
                        <Input placeholder='请输入账号' />
                    </Form.Item>
                    <Form.Item
                        name='password'
                        label='密码'
                        rules={[{ required: true, message: '密码不能为空' }]}
                    >
                        <Input type='password' placeholder='请输入密码' />
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}
